<script lang="ts" setup>
import { addAddressAPI, updateAddressAPI } from '@/api/address'
import district from './provinces.json'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  },
})

const model = reactive({
  uid: 1,
  name: '',
  telephone: '',
  address: '',
  defaults: 0,
  id: undefined,
})
const form = ref(null)
const address = ref('')
const code = ref('')

const detailAddress = ref('')

function back() {
  uni.navigateBack()
}

onLoad((options) => {
  if (options && options.query) {
    const data = JSON.parse(decodeURIComponent(options.query))
    model.id = data.id
    model.name = data.name
    model.telephone = data.telephone
    address.value = data.address.substr(0, data.address.indexOf('区') + 1)
    model.address = data.address.substr(data.address.indexOf('区') + 1)
    model.defaults = data.defaults
    console.log('model', model)
    console.log('address', address.value)
  }
})

// 选择器
function onchange(e: any) {
  e.detail.value.forEach((item: any) => {
    address.value += item.text
  })
}
function handleSubmit() {
  form.value.validate().then(async ({ valid, errors }) => {
    if (valid) {
      if (model.id) {
        await addAddressAPI(model)
      }
      else {
        await updateAddressAPI(model)
      }
      uni.showToast({ title: '保存成功', icon: 'none' })
      uni.navigateBack()
    }
  }).catch((error) => {
    console.log(error, 'error')
  })
}
</script>

<template>
  <view>
    <wd-navbar safe-area-inset-top left-arrow placeholder fixed :bordered="false" title="添加地址" @click-left="back" />
    <wd-form ref="form" :model="model">
      <wd-cell-group border>
        <wd-input v-model="model.name" label="收货人：" label-width="90px" prop="name" placeholder="请输入姓名" />
        <wd-input
          v-model="model.telephone" type="number" label="手机号码：" label-width="90px" prop="telephone"
          clearable :maxlength="11" placeholder="请输入手机号码"
        />
        <view class="default">
          <view style="width: 90px;">
            所在地区：
          </view>
          <uni-data-picker
            v-model="code" :localdata="district" placeholder="请选择地区"
            :map="{ text: 'name', value: 'code' }" @change="onchange"
          />
        </view>
        <wd-textarea
          v-model="model.address" label="详细地址：" label-width="90px" prop="detailAddress"
          placeholder="如道路、门牌号、小区、楼栋号、单元室等"
        />
        <view class="default">
          <view>设为默认：</view>
          <wd-switch
            v-model="model.defaults" size="34rpx" active-color="#13CE66" :active-value="1"
            :inactive-value="0"
          />
        </view>
      </wd-cell-group>
      <view class="fixed bottom-[20rpx] left-[30rpx] right-[30rpx]">
        <wd-button type="success" size="large" block @click="handleSubmit">
          保存
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<style lang="scss" scoped>
::v-deep .input-value-border {
  border: none;
}

::v-deep .wd-textarea__inner {
  height: 60px !important;
}

.default {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
}
</style>
